<template>
	<view class="my">
		<view class="nickname" v-if="token">
			<view class="left" @click="personInfo">
				<view class="picture">
					<image src="../../static/images/user.webp" mode=""></image>
				</view>
				<view class="phone">
					<text>{{ token.nickname }}</text>
					<text>{{ token.username }}</text>
				</view>
			</view>
			<view class="right" @click="goMessage">
				<image src="../../static/icons/消息通知.png" mode=""></image>
			</view>
		</view>
		<view class="false_login" v-else>
			<button @click="goLogin">登录查看更多内容</button>
		</view>
		<view class="my_info">
			<detailVue content="我的房屋" :url="src1" />
			<detailVue content="我的车位" :url="src2" />
			<detailVue content="我的车辆" :url="src3" />
			<detailVue content="我的租房" :url="src4" />
			<detailVue content="我的收藏" :url="src5" />
		</view>
		<view class="logger">
			<detailVue content="缴费记录" :url="src6" />
			<detailVue content="访客记录" :url="src7" />
		</view>
		<view class="outLogin" v-if="token">
			<button @click="out">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import detailVue from '../../components/detail.vue';
const src1 = ref('../static/icons/我的房屋.png');
const src2 = ref('../static/icons/我的车位.png');
const src3 = ref('../static/icons/我的车辆.png');
const src4 = ref('../static/icons/租赁中.png');
const src5 = ref('../static/icons/我的收藏.png');
const src6 = ref('../static/icons/缴费记录.png');
const src7 = ref('../static/icons/访客记录.png');
const goMessage = () => {
	uni.navigateTo({
		url: '/pages/message/message'
	});
};
let token = ref(null);
onMounted(() => {
	token.value = uni.getStorageSync('token');
});
onShow(() => {
	token.value = uni.getStorageSync('token');
});
const goLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	});
};
const personInfo = () => {
	uni.navigateTo({
		url: '/pages/personInfo/personInfo'
	});
};
const out = () => {
	uni.showModal({
		content: '是否退出该账号？',
		success: ({ confirm }) => {
			if (confirm) {
				uni.removeStorageSync('token');
				token.value = null;
			}
		}
	});
};
</script>

<style lang="scss">
.my {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background-color: #f5f9ff;
	.nickname {
		width: 100%;
		height: 200rpx;
		background-color: #3478f7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		.left {
			width: 330rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.picture {
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
			.phone {
				display: flex;
				flex-direction: column;
				text {
					margin: 6rpx 0;
					color: #fff;
				}
			}
		}
		.right {
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.false_login {
		height: 200rpx;
		display: flex;
		align-items: center;
		button {
			border: none;
			color: #fff;
			background-color: #006eff;
		}
	}
	:deep .my_info {
		width: 100%;
		background-color: #fff;
		margin: 30rpx 0;
		.detail {
			border-bottom: 2rpx solid #f2f2f2;
			.detail_picture {
				text {
					width: 140rpx;
				}
			}
		}
	}
	:deep .logger {
		width: 100%;
		background-color: #fff;
		.detail {
			border-bottom: 2rpx solid #f2f2f2;
			.detail_picture {
				text {
					width: 140rpx;
				}
			}
		}
	}
	.outLogin {
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		button {
			width: 60%;
			height: 80rpx;
			border: 2rpx solid #ff5500;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			letter-spacing: 20rpx;
			font-size: 30rpx;
			color: #ff5500;
		}
	}
}
</style>
